<template>
 <div class="box">
     
        <van-nav-bar
        title="分类"
        left-arrow
        @click-left="$router.push('/home')"
      >
        <template #left>
          <van-icon name="arrow-left" size="26" color="#000" />
        </template>
      </van-nav-bar>
    
      <div class="main">
        <van-sidebar v-model="activeKey" @change='onchange'>
  <van-sidebar-item :title="item" v-for="(item,index) in navList" :key="index" @click="getBrandList"></van-sidebar-item>
 
</van-sidebar>
<div class="right">
  <ul>
    <li v-for="(item,index) in list" :key="index" @click="jumpTo(navList[activeKey],item.brand)">{{item.brand}}</li>
  </ul>
</div>
      </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Sidebar, SidebarItem } from 'vant';

Vue.use(Sidebar);
Vue.use(SidebarItem);
import {getcategoryList,getBrandList } from "../api/kind";
export default {
  name: 'Kind',
  components: {
  },
  data() {
    return {
      activeKey: 0,
      navList:[],
      list:[]
    };
  },
  methods: {
    onchange(index){
      this.activeKey=index
      this.getBrandList()
    },
   getBrandList(){
       getBrandList({category:this.navList[this.activeKey]}).then((data)=>{
   
    this.list=data.data.data
  })
    },
    jumpTo(category,keyword){
      this.$router.push('/kindlist/'+category+'/'+keyword)
    }
  },
created () {
    getcategoryList({ count: 1, limitNum: 10 }).then((data) => {
        console.log(data.data.data)
      this.navList = data.data.data;
      this.getBrandList()
    });
 
}
}
</script>
<style scoped>
.van-sidebar-item{
 height: .02rem;
}
.main{
  display: flex;
}
.right{
  
  width: 80%;
}
.right ul {
  height: 100%;
  width:100%;
  margin: 0 auto;
  


}
.right ul li{

  margin: .1rem auto;
  padding: .2rem;
  text-align: center;
  background: #fff;
}
</style>